<template>
  <v-card>
    <v-toolbar class="elevation-0">
      <v-btn color="primary" @click="addGoods">新增商品</v-btn>
      <v-spacer/>
      <v-flex xs3>状态：
        <v-btn-toggle mandatory v-model.lazy="filter.saleable">
          <v-btn flat>全部</v-btn>
          <v-btn flat :value="true">上架</v-btn>
          <v-btn flat :value="false">下架</v-btn>
        </v-btn-toggle>
      </v-flex>
      <v-flex xs3>
        <v-text-field
          append-icon="search"
          label="搜索"
          single-line
          hide-details
          v-model="filter.search"
        />
      </v-flex>
    </v-toolbar>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="goodsList"
      :pagination.sync="pagination"
      :total-items="totalGoods"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.title }}</td>
        <td class="text-xs-center">{{props.item.cname}}</td>
        <td class="text-xs-center">{{ props.item.bname}}</td>
        <td class="text-xs-center">
          <v-span v-if="props.item.saleable" ><p class="green--text"> 已上架 </p></v-span>
          <v-span v-else><p class="red--text"> 已下架 </p></v-span>
        </td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="editGoods(props.item)"> <i class="el-icon-edit"/> </v-btn>
          <v-btn icon @click="deleteGood(props.item)"> <i class="el-icon-delete"/> </v-btn>
          <v-btn icon color="error" @click="editGoodSaleable(props.item)" v-if="props.item.saleable" >下架</v-btn>
          <v-btn icon color="success" @click="editGoodSaleable(props.item)" v-else>上架</v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="1500" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '新增'}}商品</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-3" style="height: 600px">
          <goods-form :oldGoods="oldGoods" :step="step" @close="closeWindow" :is-edit="isEdit" ref="goodsForm"/>
        </v-card-text>
        <!--底部按钮，用来操作步骤线-->
        <v-card-actions class="elevation-10">
          <v-flex class="xs3 mx-auto">
            <v-btn @click="previous" color="primary" :disabled="step === 1">上一步</v-btn>
            <v-btn @click="next" color="primary" :disabled="step === 4">下一步</v-btn>
          </v-flex>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  // 导入自定义的表单组件
  import GoodsForm from './GoodsForm'

  export default {
    name: "goods",
    data() {
      return {
        filter: {
          saleable: true,   // 上架还是下架
          search: '',       // 搜索过滤字段
        },
        totalGoods: 0,      // 总条数
        goodsList: [],      // 当前页品牌数据
        loading: true,      // 是否在加载中
        pagination: {},     // 分页信息
        headers: [
          {text: 'id', align: 'center', sortable: false, value: 'id'},
          {text: '标题', align: 'center', sortable: false, value: 'title'},
          {text: '商品分类', align: 'center', sortable: false, value: 'cname'},
          {text: '品牌', align: 'center', value: 'bname', sortable: true,},
          {text: '状态', align: 'center', value: 'saleable', sortable: false,},
          {text: '操作', align: 'center', sortable: false}
        ],
        show: false,        // 控制对话框的显示
        oldGoods: {},       // 即将被编辑的商品信息
        isEdit: false,      // 是否是编辑
        step: 1,            // 子组件中的步骤线索引，默认为1
      }
    },
    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {
      pagination: {       // 监视pagination属性的变化
        deep: true,       // deep为true，会监视 pagination 的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },
      filter: {           // 监视搜索字段
        handler() {
          this.getDataFromServer();
        },
        deep: true
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http.get("/item/spu/page", {
          params: {
            key: this.filter.search,                                               // 搜索条件
            saleable: this.filter.saleable === 0 ? null : this.filter.saleable,    // 上下架
            page: this.pagination.page,                                            // 当前页
            rows: this.pagination.rowsPerPage,                                     // 每页大小
          }
        }).then(resp => { // 这里使用箭头函数
          this.goodsList = resp.data.items;
          this.totalGoods = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        }).catch(() => {
            this.goodsList = [];
            this.totalGoods = 0;
            this.loading = false;
        });
      },
      addGoods() {
        // 修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把 oldGoods 变为null
        this.oldGoods = {};
      },
      /**
       * async 和 wait 进行配合使用，表示同步请求；（异步转同步的操作）
       * async：只有第一个请求成功的情况下，才会执行后续的逻辑；如果第一步执行失败，后续操作就不会再执行。
       * 如果删除 async ，即便请求失败，也会执行后边的请求，进而显示弹出界面
       * $http.loadData()：其实就是对get请求的封装
       */
      async editGoods(oldGoods) {
        // 发起请求，查询商品详情和sku
        oldGoods.spuDetail = await this.$http.loadData("/item/spu/detail/" + oldGoods.id);
        oldGoods.skus = await this.$http.loadData("/item/sku/list?id=" + oldGoods.id);
        //如果删除 async ，即便请求失败，也会执行后边的请求，进而显示弹出界面
        // 修改标记
        this.isEdit = true;
        // 控制弹窗可见：
        this.show = true;
        // 获取要编辑的goods
        this.oldGoods = oldGoods;
      },
      closeWindow() {
        // 重新加载数据
        this.getDataFromServer();
        // 关闭窗口
        this.show = false;
        // 将步骤调整到1
        this.step = 1;
      },
      deleteGood(oldGood) {
          // 定义一个请求参数对象，通过 “解构表达式” 来获取 group 中的属性
          const {cid1, cid2, cid3, cname, subTitle, lastUpdateTime, createTime, spuDetail, skus,...params} = oldGood;
          this.$http({
              method: 'post',
              url: '/item/spu/deleteGood',
              data: this.$qs.stringify(params)
          }).then(() => {
              // 重新加载数据
              this.getDataFromServer();
              this.$message.success("删除成功！");
          })
          .catch(() => {
              this.$message.error("删除失败！");
          });
      },
      editGoodSaleable(oldGood) {
          // 定义一个请求参数对象，通过 “解构表达式” 来获取 group 中的属性
          const {cid1, cid2, cid3, cname, subTitle, lastUpdateTime, createTime, spuDetail, skus,...params} = oldGood;
          this.$http({
              method: 'post',
              url: '/item/spu/editGoodSaleable',
              data: this.$qs.stringify(params)
          }).then(() => {
              // 重新加载数据
              this.getDataFromServer();
              this.$message.success("操作成功！");
          })
          .catch(() => {
              this.$message.error("操作失败！");
          });
      },
      next(){
        if(this.step < 4 && this.$refs.goodsForm.$refs.basic.validate()){
          this.step++
        }
      }
    },
    components: {
      GoodsForm
    }
  }
</script>

<style scoped>

</style>
